<template>
  <div
    class="popover-box"
    v-show="visible"
    :style="{
      left: left,
      top: top,
    }"
  >
    <div class="chart-box">
      <BaseEcharts :options="options" />
    </div>
  </div>
</template>

<script>
import BaseEcharts from "@/views/package/echarts/components/BaseEcharts/index.vue";
import { getOptions } from "./lineOptions2";
export default {
  components: {
    BaseEcharts,
  },
  props: {
    left: {
      type: String,
      default: "0px",
    },
    top: {
      type: String,
      default: "0px",
    },
    checkList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    visible() {
      return !!this.checkList.length;
    },
  },
  watch: {
    checkList: {
      immediate: true,
      deep: true,
      handler(list) {
        this.initChart(list);
      },
    },
  },
  data() {
    return {
      options: null,
    };
  },
  methods: {
    initChart(list) {
      if (list && list.length > 0) {
        console.log("getOptions", getOptions);
        this.options = getOptions(list);
        console.log("this.options", this.options);
      } else {
        this.options = null;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.popover-box {
  position: absolute;
  background-color: #004896;
  top: 0;
  left: 100px;

  .chart-box {
    width: 500px;
    height: 300px;
  }
}
</style>
